Implement gesture relations #3664

m-bert · 2025-08-07T14:22:29Z

Description

Test plan

For simultaneous:

import * as React from 'react';
import { Animated, Button, useAnimatedValue } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useSimultaneous,
  useGesture,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);

  const value = useAnimatedValue(0);
  const event = Animated.event(
    [{ nativeEvent: { handlerData: { translationX: value } } }],
    {
      useNativeDriver: true,
    }
  );

  const pan1 = useGesture('PanGestureHandler', {
    onUpdate: () => console.log('Pan 1'),
  });

  const pan2 = useGesture('PanGestureHandler', {
    onUpdate: () => console.log('Pan 2'),
  });

  const composedGesture = useSimultaneous(pan2, pan1);

  console.log(composedGesture);
  console.log(pan1.config, pan2.config);

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={composedGesture}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
              },
              { transform: [{ translateX: value }] },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}

For Exclusive:

import * as React from 'react';
import { Animated, Button, useAnimatedValue } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useSimultaneous,
  useGesture,
  useExclusive,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);

  const value = useAnimatedValue(0);
  const event = Animated.event(
    [{ nativeEvent: { handlerData: { translationX: value } } }],
    {
      useNativeDriver: true,
    }
  );

  const tap1 = useGesture('TapGestureHandler', {
    onEnd: () => console.log('Tap 1'),
    numberOfTaps: 1,
  });

  const tap2 = useGesture('TapGestureHandler', {
    onEnd: () => console.log('Tap 2'),
    numberOfTaps: 2,
  });

  const tap3 = useGesture('TapGestureHandler', {
    onEnd: () => console.log('Tap 3'),
    numberOfTaps: 3,
  });

  const composedGesture = useExclusive(tap3, tap2, tap1);

  console.log(composedGesture);
  console.log(tap1.config, tap2.config, tap3.config);

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={composedGesture}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
              },
              { transform: [{ translateX: value }] },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}

For Race:

import * as React from 'react';
import { Animated, Button, useAnimatedValue } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useSimultaneous,
  useGesture,
  useExclusive,
  useRace,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);

  const value = useAnimatedValue(0);
  const event = Animated.event(
    [{ nativeEvent: { handlerData: { translationX: value } } }],
    {
      useNativeDriver: true,
    }
  );

  const tap1 = useGesture('TapGestureHandler', {
    onEnd: () => console.log('Tap 1'),
    numberOfTaps: 1,
  });

  const pan1 = useGesture('PanGestureHandler', {
    onEnd: (e, s) => console.log('Pan 1', s),
  });

  const composedGesture = useRace(tap1, pan1);

  console.log(composedGesture);

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={composedGesture}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
              },
              { transform: [{ translateX: value }] },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}

For composed:

import * as React from 'react';
import { Animated, Button, useAnimatedValue } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useSimultaneous,
  useGesture,
  useExclusive,
  useRace,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);

  const value = useAnimatedValue(0);
  const event = Animated.event(
    [{ nativeEvent: { handlerData: { translationX: value } } }],
    {
      useNativeDriver: true,
    }
  );

  const tap1 = useGesture('TapGestureHandler', {
    onEnd: () => console.log('Tap 1'),
    numberOfTaps: 1,
  });

  const pan1 = useGesture('PanGestureHandler', {
    onUpdate: (e) => console.log('Pan 1'),
  });

  const pan2 = useGesture('PanGestureHandler', {
    onUpdate: (e) => console.log('Pan 2'),
  });

  const composedGesture = useExclusive(tap1, useSimultaneous(pan1, pan2));

  console.log(composedGesture);

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={composedGesture}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
              },
              { transform: [{ translateX: value }] },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}

packages/react-native-gesture-handler/src/v3/hooks/relations/useExclusive.ts

packages/react-native-gesture-handler/src/v3/NativeDetector.tsx

packages/react-native-gesture-handler/src/index.ts

m-bert added 7 commits August 7, 2025 16:15

Disable coalescing on Android

f337486

Basic simultaneous

43c84e5

Add Exclusvie composition

c0433bf

useRace

4a81c1c

Add gesture names

18de5ca

Merge branch '@mbert/shared-values' into @mbert/gesture-relations

d906df9

Merge branch '@mbert/shared-values' into @mbert/gesture-relations

ee6c581

akwasniewski reviewed Aug 13, 2025

View reviewed changes

packages/react-native-gesture-handler/src/v3/hooks/relations/useExclusive.ts Outdated Show resolved Hide resolved

Implement DFS for gesture relations

b973da8

akwasniewski reviewed Aug 14, 2025

View reviewed changes

packages/react-native-gesture-handler/src/v3/NativeDetector.tsx Outdated Show resolved Hide resolved

packages/react-native-gesture-handler/src/v3/NativeDetector.tsx Outdated Show resolved Hide resolved

packages/react-native-gesture-handler/src/index.ts Show resolved Hide resolved

m-bert added 5 commits August 14, 2025 12:21

Implement module method for updating relations

39d976d

Add blocksHandlers array

f622d69

Handle Simultaneous as root

b83c17f

Change name to enum

18b1269

Move DFS to other file

b7ca9bb

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Implement gesture relations #3664

Implement gesture relations #3664

m-bert commented Aug 7, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Implement gesture relations #3664

Are you sure you want to change the base?

Implement gesture relations #3664

Conversation

m-bert commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test plan

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

m-bert commented Aug 7, 2025 •

edited

Loading